<!-- 拖拽滑动 -->
<template>
  <div id="default_drag_comp" class="problem-setting-btn"
       @click="goNext"
       @touchstart="down"
       @touchmove="move"
       @touchend="end"
  >
    <span class="text" >{{ text }}</span>
  </div>
</template>

<script>
export default {
  name: "defaultDrag",
  props:['text'],
  data() {
    return {
      flags: false,
      position: { x: 0, y: 0 },
      nx: "",
      ny: "",
      dx: "",
      dy: "",
      xPum: "",
      yPum: "",
      maxW:0,
      maxH:0,
      minW:10,
      minH:50,
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    goNext() {
      console.log('点击事件')
      this.$emit("goNext");
    },
    // 实现移动端拖拽
    down() {
      let default_drag_comp = document.querySelector("#default_drag_comp");
      this.flags = true;
      var touch;
      if (event.touches) {
        touch = event.touches[0];
      } else {
        touch = event;
      }
      this.maxW = document.body.clientWidth - default_drag_comp.offsetWidth-10;
      this.maxH = document.body.clientHeight - default_drag_comp.offsetHeight-10;

      this.position.x = touch.clientX - default_drag_comp.offsetLeft;
      this.position.y = touch.clientY - default_drag_comp.offsetTop;
      this.dx = touch.clientX;
      this.dy = touch.clientY;
    },
    move(event) {
      event.preventDefault();
      let default_drag_comp = document.querySelector("#default_drag_comp");
      if (this.flags) {
        var touch;
        if (event.touches) {
          touch = event.touches[0];
        } else {
          touch = event;
        }
        this.nx = touch.clientX - this.position.x;
        this.ny = touch.clientY - this.position.y;

        if (this.nx < this.minW) {
          this.nx = this.minW;
        } else if (this.nx > this.maxW) {
          this.nx = this.maxW;
        }

        if (this.ny <  this.minH) {
          this.ny = this.minH;
        } else if (this.ny >= this.maxH) {
          this.ny = this.maxH;
        }

        default_drag_comp.style.left = this.nx + "px";
        default_drag_comp.style.top = this.ny + "px";
        //阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
        document.addEventListener(
          "touchmove",
          function() {
            // event.preventDefault();
          },
          false
        );
      }
    },
    //鼠标释放时候的函数
    end() {
      let default_drag_comp = document.querySelector("#default_drag_comp");
      if (this.nx > this.maxW/50 && this.nx <= this.maxW/2) {
        this.nx = this.minW;
      }else if(this.nx > this.maxW/2 && this.nx < this.maxW*49/50 ) {
        this.nx = this.maxW;
      }
      default_drag_comp.style.left = this.nx + "px";
      default_drag_comp.style.top = this.ny + "px";
      this.flags = false;
    }
  }
};
</script>
<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
//#default_drag_comp {
//  width: 1rem;
//  height: 1rem;
//  border-radius: 50%;
//  border: 2px solid #ffffff;
//  box-shadow: 0 0 0.4rem 2px #d3d3d3;
//  background: #ff9966;
//  position: fixed;
//  z-index: 1000;
//  bottom: 0.8rem;
//  right: 0.4rem;
//  display: flex;
//  justify-content: center;
//  align-items: center;
//  span {
//    color: #ffffff;
//    font-size: 0.24rem;
//  }
//}
.problem-setting-btn {
  position:fixed;
  z-index:2;
  right:20px;
  bottom:140px;
  width: pxToRem(150px);
  height: pxToRem(150px);
  line-height: pxToRem(164px);
  background: linear-gradient(0deg, rgba(227, 2, 1, 1), rgba(255, 144, 0, 1));
  box-shadow: 0px pxToRem(8px) pxToRem(24px) 0px rgba(151, 1, 0, 0.46);
  border-radius: 50%;
  color: #fff;
  text-align: center;
  font-size: pxToRem(31.46px);
  float: right;

  .text {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate3d(-50%,-50%,0);
    width:2em;
    line-height:1.2em;
    font-size:16PX;
    font-weight:400;
    color:rgba(255,255,255,1);
  }
}
</style>
